<template>
    <div>
        <yk-space class="control" dir="vertical" justify="between" align="center">
            <yk-button @click="blockChange" :disabled="!props.started">
                变换
                <IconUpwardFill />
            </yk-button>
            <yk-space size="120px">
                <yk-button @click="blockLeftShift" :disabled="!props.started">
                    <IconLeftwardFill />向左
                </yk-button>
                <yk-button @click="blockRightShift" :disabled="!props.started">
                    向右
                    <IconRightwardFill />
                </yk-button>
            </yk-space>
            <yk-button @click="blockDownShift" :disabled="!props.started">
                向下
                <IconDownwardFill />
            </yk-button>
        </yk-space>
    </div>
</template>


<script setup>
import { onMounted, defineEmits, defineProps } from 'vue'
const emit = defineEmits(["gameControl"])

const props = defineProps({
    started: {
        type: Boolean,
        default: false
    }
})

// 变形
const blockChange = () => {
    emit("gameControl", 38)
}

// 左移
const blockLeftShift = () => {
    emit("gameControl", 37)
}

// 右移
const blockRightShift = () => {
    emit("gameControl", 39)
}

// 下移
const blockDownShift = () => {
    emit("gameControl", 40)
}
onMounted(() => {
    window.addEventListener('keydown', (e) => {
        console.log(e.keyCode)
        if (e.keyCode == 32) {
            emit("gameControl", e.keyCode)
        }
        if (!props.started) return
        if (e.keyCode == 38 || e.keyCode == 37 || e.keyCode == 39 || e.keyCode == 40) {
            emit("gameControl", e.keyCode)
        }
    })
})
</script>


<style lang="scss" scoped>
.control {
    height: 200px;
    .bt {
        height: 36px;
        background: #aaa;
        // width: 100px;
        margin: 12px;
        text-align: center;
        line-height: 36px;
        color: #fff;
        cursor: pointer;
    }
}
</style>